<template>
    <div>
        <h1>PropsChildren</h1>
        <h2>a: {{ a }}</h2>
        <h2>b: {{ b }}</h2>
        <h2>c: {{ c }}</h2>
        <h2>d: {{ d }}</h2>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.id }} -- {{ item.name }} -- {{ item.age }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="PropsChildren">

import { ref } from 'vue'
import { type TPersonslist } from '@/types'


// 接受参数
// let props = defineProps(['a', 'list'])
// console.log('props :>> ', props);

// 接受参数 + 限制类型
// defineProps<{ list: TPersonslist, a: string }>()

// 接受参数 + 限制类型 + 必要性 + 默认值
// 【defineProps, withDefaults】 is a compiler macro and no longer needs to be imported.
withDefaults(defineProps<{ list: TPersonslist, a: string, b?: number, c?: string, d?: Array<number> }>(), {
    c: 'default',
    d: () => [1, 2, 3, 4],// 数组类型需要通过函数返回
})

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>